<template>
  <div class="time">
    <p>{{ moment(new Date()).format('yyyy-MM-DD') }} </p>
    <div> {{ dateFormat(date) }}</div>
  </div>
</template>


<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  onBeforeUnmount,
  getCurrentInstance
} from 'vue'
import moment from "moment";

let date = ref(new Date()) //实时时间
let timer = ref() //定时器
const dateFormat = (time: any) => {
  let date = new Date(time);
  // let year = date.getFullYear();
  // let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
  // let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  // 拼接
  return (hours + ":" + minutes + ":" + seconds);
}

onMounted(() => {
  timer.value = setInterval(() => {
    date.value = new Date(); // 修改数据date
  }, 1000);
})

onBeforeUnmount(() => {
  clearInterval(timer.value);
  timer.value = null
})

</script>


<style lang="scss" scoped></style>